<template>
    <div>
      <h3>这是第七个demo</h3>
      <p>姓:<input type="text" v-model='firstName'></p>
      <p>名:<input type="text" v-model='lastName'></p>
      <p>我叫:<span>{{fullName}}</span></p>
      <p>我叫:<span>{{fullName}}</span></p>
      <p>我叫:<span>{{fullName}}</span></p>
  
      <button @click="changeName">修改姓名</button>
    </div>
  </template>
  
  <script setup lang="ts" name="Demo7">
  import { ref, computed} from 'vue'
  let firstName = ref('孙');
  let lastName = ref("悟空");
  let fullName = computed({
      get() {
          return firstName.value + lastName.value;
      },
      set(val) {
          console.log(val,'val')
          let [a1,a2] = val.split('-');
          firstName.value = a1;
          lastName.value = a2;
      }
  })
  
  
  function changeName() {
      fullName.value = '唐-僧';
  }
  
  function getName() {
      console.log("调用");
     return firstName.value + lastName.value;
  }
  </script>
  <style lang='scss' scoped>
  
  </style>